<template>
	<div style="width: 100%;background-color: #f7f7f7;height: 110px;padding: 20px;margin-bottom: 15px;">
		<el-input style="width: 250px;"placeholder="请输入规格项,如颜色/尺码/大小" />
		<div class="goodsQuality" >
			<div class="qualityBox"></div>
			<div v-for="(mycomponent, index) in mycomponents">
				<MyInput></MyInput>	
			</div>
		</div>
		<p @click="addMyComponent" style="width: 100px;">+添加规格值</p>
	</div>
</template>

<script setup>
	import MyInput from './MyInput.vue';
	import {ref,reactive,onMounted} from "vue"
	// 多规格添加新input
	const mycomponents = ref([""]); // 初始化一个空数组来存储子组件  
	const addMyComponent = () => {  
		mycomponents.value.push(null); 
	};  
</script>

<style scoped>
	.goodsQuality{
		display: flex;
		margin-left: 20px;
		height: 55px;
		flex-wrap: wrap;
		.qualityBox{
			width: 20px;
			height: 40px;
			border-left: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}
	}
</style>
